<script setup lang="ts">
import PcMenu from './pc.layout'
import IpadMenu from './ipad.layout.vue'
import PhoneMenu from './phone.layout.vue'
import { themesStore } from '@/stores/modules/theme'
const theme = themesStore()
const { getThemeType: themetype } = storeToRefs(theme)
const { width } = useWindowSize()
const menuName = computed(() => {
  switch (themetype.value) {
    case 'columns':
      return markRaw(PcMenu)
    case 'routine':
      return markRaw(IpadMenu)
    case 'drawers':
      return markRaw(PhoneMenu)
  }
  if (width.value >= 1200) return markRaw(PcMenu)
  if (width.value >= 900) return markRaw(IpadMenu)
  return markRaw(PhoneMenu)
})
</script>

<template>
  <component :is="menuName"></component>
</template>

<style lang="scss" scoped></style>
